<template>
  <BasePageTable :table-data="tableData" :table-columns-data="tableColumnsData" style="height: 500px">
    <template #contractFile="{ row, index }">
      <!-- <el-image
        style="width: 100px; height: 100px"
        :src="value.url"
        v-for="(value, index) in row.contractFile || []"
        :key="index"
        :preview-src-list="[value.url]"
      /> -->
      <el-image style="width: 100px; height: 100px" :src="getUrl(value.url)"
        v-for="(value, index) in row.contractFile || []" :key="index" @click="openImg(value.url)" />
      <el-image-viewer v-if="showImg" :url-list="srcList" show-progress :initial-index="0" @close="showImg = false" />
    </template>
    <template #paymentFile="{ row, index }">
      <el-image style="width: 100px; height: 100px" :src="value.url" v-for="(value, index) in row.paymentFile || []"
        :key="index" :preview-src-list="[value.url]" />
    </template>
    <template #receiptFile="{ row, index }">
      <el-image style="width: 100px; height: 100px" :src="value.url" v-for="(value, index) in row.receiptFile || []"
        :key="index" :preview-src-list="[value.url]" />
    </template>
  </BasePageTable>
</template>
<script setup lang="ts">
import BasePageTable from "@/components/BasePageTable/index.vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const showImg = ref(false);
const srcList = ref([]);

const tableData = computed(() => {
  return (props.data.houseConstructionMaterialBuyVO || []).map((item) => {
    return {
      ...item,
      contractFile: JSON.parse(item.contractFile || "[]"),
      receiptFile: JSON.parse(item.receiptFile || "[]"),
      paymentFile: JSON.parse(item.paymentFile || "[]"),
    };
  });
});
const tableColumnsData = ref([
  {
    prop: "store",
    label: "门店",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "buyDate",
    label: "购买日期",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "categoryText",
    label: "品类",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "brandName",
    label: "品牌",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "salesman",
    label: "销售人员",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "salesmanMobile",
    label: "销售人员电话",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "amount",
    label: "合同金额(元)",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "contractTime",
    label: "合同时间",
    showOverflowTooltip: true,
    width: 200,
  },
  {
    prop: "contractFile",
    label: "合同",
    showOverflowTooltip: true,
    customSlot: "contractFile",
    width: 300,
  },
  // {
  //   prop: "paymentFile",
  //   label: "付款凭证",
  //   showOverflowTooltip: true,
  //   customSlot: "paymentFile",
  //   width: 300,
  // },
  {
    prop: "receiptFile",
    label: "收款凭证",
    showOverflowTooltip: true,
    customSlot: "receiptFile",
    width: 300,
  },
]);
function getUrl(val: any) {
  if (val && val.includes(".pdf")) {
    return "https://djucloud-prod.oss-cn-shanghai.aliyuncs.com/mini_program_dir/pdfs.png";
  } else {
    return val;
  }
}

function openImg(val: any) {
  if (val && val.includes(".pdf")) {
    window.open(val, "_blank");
  } else {
    showImg.value = true;
    srcList.value = [val];
  }
}
</script>
<style style="scss" scoped>
.form-container {
  /* //height: 600px; */
  overflow: auto;
}

.form {
  ::v-deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
